<template>
  <div class="orderListBase">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderId" label="发货任务编号" align="center">
      </el-table-column>
      <el-table-column prop="packageNum" label="包裹数" align="center">
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payTime ? scope.row.payTime.split(' ')[0] : '--' }}</span>
          <br>
          <span>{{ scope.row.payTime ? scope.row.payTime.split(' ')[1] : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderAllMoney" label="支付金额" align="center">
      </el-table-column>
      <el-table-column prop="orderStatusDetail" label="任务状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 0">待付款</span>
          <span v-if="scope.row.orderStatus == 1">任务处理中</span>
          <span v-if="scope.row.orderStatus == 8">已取消</span>
          <span v-if="scope.row.orderStatus == 3">获取订单失败</span>
          <span v-if="scope.row.orderStatus == 4">发货中</span>
          <span v-if="scope.row.orderStatus == 5">可发货</span>
          <span v-if="scope.row.orderStatus == 6">发货完成</span>
          <span v-if="scope.row.orderStatus == 9">订单撤销</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderAllMoney" label="是否已确认发货" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.orderStatus == 5" type="text" style="color: #4CAF50;font-size:12px;" @click="sureSend(scope.row)">我已确认发货</el-button>
          <el-button v-else type="text" style="font-size:12px;">--</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <!-- orderStatus: 0 待付款, 1 已支付, 2 订单取消, 3 获取订单失败, 4发货中  5 发货完成-->
          <div v-if="scope.row.orderStatus==1 || scope.row.orderStatus==5 || scope.row.orderStatus==6" class="text-button lhbtn" @click="lookDetail(scope.row)">查看详情</div>
          <div v-if="scope.row.orderStatus==6 || scope.row.orderStatus==5" class="text-button lhbtn" @click="downTable(scope.row)">导出订单</div>
          <el-popover placement="bottom" v-if="scope.row.orderStatus==6 || scope.row.orderStatus==5" title="后台发货必须选择" width="250" trigger="hover" content="自己联系物流（不要选择在线下单）">
            <a slot="reference" href="http://kmd.liangjutong.com" target="_blank" style="text-decoration:none" class="text-button lhbtn">批量发货</a>
          </el-popover>
          <div v-if="scope.row.orderStatus==0" class="text-button lhbtn" @click="sureToPay(scope.row)">确认支付</div>
          <div v-if="scope.row.orderStatus==0" class="text-button lhbtn" @click="cancelOrder(scope.row)">撤销</div>
          <div v-if="(scope.row.orderStatus==1 || scope.row.orderStatus==5 || scope.row.orderStatus==6) && isTimeout(scope.row.payTime)" @click="cancelPayedOrder(scope.row)" class="text-button lhbtn">撤销订单</div>
          <div v-if="scope.row.orderStatus !=0 && scope.row.orderStatus !=1 && scope.row.orderStatus !=5 && scope.row.orderStatus !=6" class="text-button lhbtn">--</div>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog custom-class="importAttition" title="重要通知" :modal-append-to-body="false" :visible.sync="importActionObj.show" width="440px" top="20vh">
        <h1>请选择您要下载的表格数据模板</h1>
        <div class="checkBox">
          <el-checkbox-group v-model="importActionObj.checkList">
            <el-checkbox label="三方订单号" disabled>三方订单号</el-checkbox>
            <el-checkbox label="快递公司" disabled>快递公司</el-checkbox>
            <br>
            <el-checkbox label="快递单号" disabled>快递单号</el-checkbox>
            <br>
            <el-checkbox label="收件人信息(姓名-手机号-收货地址)" disabled>收件人信息(姓名-手机号-收货地址)</el-checkbox>
            <br>
            <el-checkbox label="卖家备注">卖家备注</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="commentBox" v-if="importActionObj.checkList.indexOf('卖家备注') > -1">
          <el-radio-group v-model="importActionObj.commentType">
            <el-radio :label="1">卖家备注-包裹清单</el-radio>
            <el-radio :label="2">卖家备注-自定义</el-radio>
          </el-radio-group>
          <div class="packageList boxShadow" v-if="importActionObj.commentType == 1">
            <el-checkbox-group v-model="importActionObj.packageList">
              <el-checkbox label="sendTime">发货时间</el-checkbox>
              <el-checkbox label="productName">礼品名称*数量</el-checkbox>
              <br>
              <el-checkbox label="logisticsName">快递公司</el-checkbox>
              <el-checkbox label="logisticsId">快递单号</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="commentDiy boxShadow" v-else>
            <el-input type="textarea" :rows="3" placeholder="请输入您想填写的备注(30个字内)" v-model="importActionObj.textComment">
            </el-input>
          </div>
        </div>
        <div class="footer">
          <b class="button-n" @click="downTables">下载表格</b>
          <!-- <br /> -->
          <!-- <el-checkbox v-model="importActionObj.isNever">以后不再弹出提示</el-checkbox> -->
        </div>
        <div class="urlComment" v-if="importActionObj.row.shopType == 1 || importActionObj.row.shopType == 2">
          <p>
            我们为您提供了一款能够
            <strong>批量发货</strong>
            的插件, 您可以上传我们的表格
            <strong>一键发货</strong>, 快去购买吧:
            <a href="http://kmd.liangjutong.com" target="_blank">http://kmd.liangjutong.com</a>
          </p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
export default {
  name: 'orderListBase',
  props: {
    tableData: {
      type: Array
    }
  },
  data () {
    return {
      importActionObj: {
        show: false,
        checkList: ['三方订单号', '快递公司', '快递单号', '收件人信息(姓名-手机号-收货地址)'],
        commentType: 1,
        packageList: [],
        textComment: '',
        isNever: false,
        row: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    isTimeout (payTime) { // 验证支付时间是否可撤销订单
      if (payTime) {
        let pt = new Date(payTime).getTime()
        let now = new Date().getTime()
        let t = parseInt((now - pt) / (1000))
        if (t < 270) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    cancelPayedOrder (row) { // 撤销订单请求
      this.$confirm('确认要撤销该订单任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.isTimeout(row.payTime)) {
          this.$ajax.post('/api/order/operate/revokeOrder', {
            orderId: row.orderId
          }).then((res) => {
            if (res.data.code === '200') {
              this.$message({
                message: '撤销成功',
                type: 'success'
              })
              this.$emit('refresh')
            }
          })
        } else {
          this.$message({
            message: '订单支付时间已超过5分钟, 不能撤销该订单！',
            type: 'warning'
          })
        }
      })
    },
    // 确认发货
    sureSend (row) {
      this.$confirm('确认您在您自己的后台已确认发货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sureSendPost(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    sureSendPost (row) {
      this.$ajax.post('/api/order/operate/setOrderSellerSendComplete', {
        orderId: row.orderId
      }).then((data) => {
        if (data.data.code === '200') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$emit('refresh')
          // this.search()
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    lookDetail (row) {
      this.$emit('lookDetail', row)
    },
    sureToPay (row) { // 确认去支付
      this.$confirm('确认支付该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$ajax.post('/api/order/operate/pay', {
          orderId: row.orderId
        }).then((data) => {
          if (data.data.code === '200') {
            if (data.data.data.code === 0) {
              this.$message({
                message: '支付成功',
                type: 'success'
              })
              this.$router.push({ name: 'paySuccess' })
            } else if (data.data.data.code === -1) {
              this.$message({
                message: '"' + data.data.data.productName + '"' + data.data.data.msg + ', 请撤销任务后重新下单',
                type: 'warning'
              })
            } else {
              this.$message({
                message: data.data.data.msg,
                type: 'warning'
              })
            }
          } else {
            this.$message({
              message: data.data.message,
              type: 'warning'
            })
          }
        }).catch((err) => {
          console.error(err)
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        })
      })
    },
    cancelOrder (row) { // 撤销订单接口
      this.$ajax.post('/api/order/operate/cancelOrder', {
        orderId: row.orderId
      }).then((data) => {
        if (data.data.code === '200') {
          this.$message({
            message: '撤销成功',
            type: 'success'
          })
          this.$emit('refresh')
          // this.search()
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    downTable (row) { // 弹出第三方下载的插件工具
      this.$ajax.post('/api/task/judgeCanDownload', {
        orderId: row.orderId
      }).then((data) => {
        if (data.data.code === '200') {
          this.importActionObj.row = row
          this.importActionObj.show = true
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    downTables () {
      let row = this.importActionObj.row
      let params = ``
      if (this.importActionObj.checkList.indexOf('卖家备注') > -1) { // 选择卖家备注
        if (parseInt(this.importActionObj.commentType) === 1) { // 选择包裹清单
          if (this.importActionObj.packageList.length > 0) {
            params = `commentType=${this.importActionObj.commentType}&commentContent=${this.importActionObj.packageList.join(',')}`
          } else {
            this.$message({
              message: '请选择要导出的字段',
              type: 'warning'
            })
            return false
          }
        } else { // 自定义
          if (this.importActionObj.textComment === '') {
            this.$message({
              message: '请填写自定义备注内容',
              type: 'warning'
            })
            return false
          } else {
            params = `commentType=${this.importActionObj.commentType}&sellerComment=${this.importActionObj.textComment}`
          }
        }
        window.open(`/api/task/downloadPackageList?orderId=${row.orderId}&sellerAccountId=${this.userInfo.sellerAccountId}&${params}`)
      } else {
        window.open(`/api/task/downloadPackageList?orderId=${row.orderId}&sellerAccountId=${this.userInfo.sellerAccountId}`)
      }
      this.importActionObj.show = false
      this.importActionObj.textComment = ''
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/index.styl'
.lhbtn
  line-height 20px
.importAttition
  padding 40px
  text-align center
  h1
    fontSize($fontSize-l, 1, $fontColor)
    margin-bottom 20px
    text-align center
  .checkBox
    text-align left
    margin-bottom 20px
  .commentBox
    text-align center
  .packageList
    text-align left
  .commentDiy
    text-align center
  .boxShadow
    padding 20px 40px
  .footer
    text-align center
    margin-top 30px
    margin-bottom 30px
  .urlComment
    text-align left
    p
      fontSize($fontSize, 1, $fontColor)
      line-height 20px
      strong
        fontSize($fontSize-m, 1, $mainColor)
      a
        fontSize($fontSize, 1, #2C7DFF)
        text-decoration none
</style>
